<template>
  <view class="messaage-container">
    <navigation-bar>
      <view class="top-title-bar">
        信息
      </view>
    </navigation-bar>
    <view class="main-content-wrapper"
      :style="{height: `calc(100% - ${statusbarHeight}px - ${bar_topHeight}px - 100rpx)`}">
      <view class="tab-list-wrap">
        <view class="tab-item" :class="{'tab-item_active': current === index}" v-for="(item, index) in tabList"
          :key="item" @click="onTabClick(index)">
          {{item}}
        </view>
        <view class="active-line" :style="{left: 25 * current + '%'}">
          <view class="inner-line"></view>
        </view>
      </view>
      <view class="hr-line"></view>
      <view class="swiper-wrap">
        <swiper :current="current" :duration="300" class="swiper-list" @change="onSwiperChange">
          <!-- 系统 -->
          <swiper-item class="swiper-item">
            <z-paging ref="paging1" v-model="systemMessageList" :use-cache="false" @query="onQuery('系统')">
              <view class="message-system-list message-list">
                <view class="message-system-item message-item" v-for="item in systemMessageList" :key="item.id">
                  <view class="coner-avatar">
                    <image class="avatar-pic" :src="item.avatar" mode="aspectFill"></image>
                  </view>
                  <view class="middle-message-content"
                    :style="{width: item.cover === '' ? '100%' : 'calc(100% - 160rpx)'}">
                    <view class="name">
                      {{item.name}}
                    </view>
                    <view class="time">
                      {{item.time}}
                    </view>
                    <view class="content">
                      <text>{{item.content}}</text>
                    </view>
                  </view>
                  <view class="right-mini-img" v-if="item.cover !== ''">
                    <image class="img" :src="item.cover" mode="aspectFill"></image>
                  </view>
                </view>
              </view>
            </z-paging>
          </swiper-item>
          <!-- 评论 -->
          <swiper-item class="swiper-item" v-if="userType !== 'official'">
            <z-paging ref="paging2" v-model="commentMessageList" :use-cache="false" @query="onQuery('评论')">
              <view class="message-comment-list message-list">
                <view class="message-comment-item message-item" v-for="item in commentMessageList" :key="item.id">
                  <navigator url="/subpkg/user-page/user-page?userType=user" hover-class="none" class="coner-avatar">
                    <image class="avatar-pic" :src="item.avatar" mode="aspectFill"></image>
                  </navigator>
                  <view class="middle-message-content"
                    :style="{width: item.cover === '' ? '100%' : 'calc(100% - 160rpx)'}">
                    <view class="name">
                      {{item.name}}
                    </view>
                    <view class="time" style="margin-bottom: 4rpx;font-size: 20rpx;">
                      {{item.time}}
                    </view>
                    <view class="content"
                      :style="{'margin': item.my_comment === '' ? '20rpx 0' : '0', 'font-size': '20rpx'}">
                      <text>{{item.content}}</text>
                    </view>
                    <view class="my-comment content" style="font-size: 20rpx;" v-if="item.my_comment !== ''">
                      <text>{{item.my_comment}}</text>
                    </view>
                    <view class="bottom-action-btns">
                      <view class="reply" @click="onReplyComment">
                        回复
                      </view>
                      <navigator url="/thirdpkg/post-report/post-report" hover-class="none" class="report">
                        举报
                      </navigator>
                    </view>
                  </view>
                  <navigator :url="'/thirdpkg/post-detail/post-detail?postType=' + item.post_type" hover-class="none"
                    class="right-mini-img" v-if="item.post_text !== ''">
                    <view class="inner-text">
                      <view class="text-inner-box">
                        <text>{{item.post_text}}</text>
                      </view>
                    </view>
                  </navigator>
                  <navigator :url="'/thirdpkg/post-detail/post-detail?postType=' + item.post_type" hover-class="none"
                    class="right-mini-img" v-else>
                    <image class="img" :src="item.cover" mode="aspectFill"></image>
                  </navigator>
                </view>
              </view>
            </z-paging>
          </swiper-item>
          <!-- 投稿 -->
          <swiper-item class="swiper-item" style="padding-bottom: 100rpx;" v-else>
            <z-paging ref="paging2" v-model="releaseMessageList" :use-cache="false" @query="onQuery('投稿')">
              <view class="message-release-content">
                <view class="message-term-list">
                  <view class="message-term-item" v-for="(item, index) in releaseMessageList" :key="item.id">
                    <view class="term-title" v-if="item.releaseList.length !== 0">
                      <text style="margin-right: 24rpx;">{{item.date}}</text><text>{{item.term}}</text>
                    </view>
                    <view class="term-release-list">
                      <view class="term-release-item" v-for="(releaseItem, releaseIndex) in item.releaseList"
                        :key="releaseItem.id">
                        <view class="user-info-hd">
                          <navigator url="/subpkg/user-page/user-page?userType=user" hover-class="none"
                            class="avatar-box">
                            <image class="img" :src="releaseItem.avatar" mode="aspectFill"></image>
                          </navigator>
                          <view class="user-info">
                            <view class="name">
                              {{releaseItem.name}}
                            </view>
                            <view class="time">
                              {{releaseItem.time}}
                            </view>
                          </view>
                        </view>
                        <view class="release-info-bd">
                          <view class="type-info">
                            <view class="anonymous">
                              {{releaseItem.isAnonymous ? '匿名向您投稿了：' : '向您投稿了：'}}
                            </view>
                            <view class="tag">
                              #{{releaseItem.tag}}
                            </view>
                          </view>
                          <view class="content">
                            <text>{{releaseItem.content}}</text>
                          </view>
                          <view class="img-list">
                            <view class="img-item" v-for="(imgItem,imgIndex) in releaseItem.imgList" :key="imgItem">
                              <image class="pic" :src="imgItem" mode="heightFix"
                                @click="onPreviewImg(imgIndex, releaseItem.imgList)"></image>
                            </view>
                          </view>
                          <view class="foot-capsule-action">
                            <view class="release-lefthalf"
                              :style="{'background-color': releaseItem.isSelected ? '#0091FF' : '#F0F0F0'}"
                              @click="onChangeCapsule(index, item, releaseItem, releaseIndex)">
                              投稿
                            </view>
                            <view class="reject-righthalf"
                              :style="{'background-color': releaseItem.isSelected ? '#F0F0F0' : '#0091FF'}"
                              @click="onChangeCapsule(index, item, releaseItem, releaseIndex)">
                              退回
                            </view>
                          </view>
                        </view>
                      </view>
                    </view>
                  </view>
                </view>
              </view>
            </z-paging>
            <view class="release-action-fixbottom">
              <view class="action-info">
                <text>已选择</text><text style="margin-left: 24rpx;color: #0091FF;">{{selectedCount}}条</text>
              </view>
              <view class="action-confirm" @click="onConfirmRelease">
                确定
              </view>
            </view>
          </swiper-item>
          <!-- 点赞 -->
          <swiper-item class="swiper-item">
            <z-paging ref="paging3" v-model="favorMessageList" :use-cache="false" @query="onQuery('点赞')">
              <view class="message-favor-list message-list">
                <view class="message-favor-item message-item" v-for="item in favorMessageList" :key="item.id">
                  <navigator url="/subpkg/user-page/user-page?userType=user" hover-class="none" class="coner-avatar">
                    <image class="avatar-pic" :src="item.avatar" mode="aspectFill"></image>
                  </navigator>
                  <view class="middle-message-content"
                    :style="{width: item.cover === '' ? '100%' : 'calc(100% - 160rpx)'}">
                    <view class="name">
                      {{item.name}}
                    </view>
                    <view class="time" style="margin-bottom: 4rpx;font-size: 20rpx;">
                      {{item.time}}
                    </view>
                    <view class="content"
                      :style="{'margin': item.my_comment === '' ? '20rpx 0' : '0', 'font-size': '20rpx'}">
                      <text>{{item.content}}</text>
                    </view>
                    <view class="my-comment content" style="font-size: 20rpx;" v-if="item.my_comment !== ''">
                      <text>{{item.my_comment}}</text>
                    </view>
                    <view class="bottom-action-btns" v-if="item.my_comment !== ''">
                      <view class="reply" @click="onReplyComment">
                        回复
                      </view>
                      <navigator url="/thirdpkg/post-report/post-report" hover-class="none" class="report">
                        举报
                      </navigator>
                    </view>
                  </view>
                  <navigator :url="'/thirdpkg/post-detail/post-detail?postType=' + item.post_type" hover-class="none"
                    class="right-mini-img" v-if="item.post_text !== ''">
                    <view class="inner-text">
                      <view class="text-inner-box">
                        <text>{{item.post_text}}</text>
                      </view>
                    </view>
                  </navigator>
                  <navigator :url="'/thirdpkg/post-detail/post-detail?postType=' + item.post_type" hover-class="none"
                    class="right-mini-img" v-else>
                    <image class="img" :src="item.cover" mode="aspectFill"></image>
                  </navigator>
                </view>
              </view>
            </z-paging>
          </swiper-item>
          <!-- 粉丝 -->
          <swiper-item class="swiper-item">
            <z-paging ref="paging4" :use-cache="false" v-model="funsMessageList" @query="onQuery('粉丝')">
              <view class="message-funs-list message-list">
                <view class="message-funs-item message-item" v-for="(item, index) in funsMessageList" :key="item.id">
                  <navigator url="/subpkg/user-page/user-page?userType=user" hover-class="none" class="coner-avatar">
                    <image class="avatar-pic" :src="item.avatar" mode="aspectFill"></image>
                  </navigator>
                  <view class="middle-message-content">
                    <view class="name">
                      {{item.name}}
                    </view>
                    <view class="content" style="margin: 6rpx 0;font-size: 20rpx;">
                      <text>{{item.content}}</text>
                    </view>
                    <view class="time" style="margin-bottom: 0rpx;font-size: 20rpx;">
                      {{item.time}}
                    </view>
                  </view>
                  <view class="right-focus-back" @click="onFocusClick(index)"
                    :style="{'background-color': item.isFocus ? '#B7B7B7' : '#000'}">
                    {{item.isFocus ? '已关注' : '回关'}}
                  </view>
                </view>
              </view>
            </z-paging>
          </swiper-item>
        </swiper>
      </view>
      <cc-toast ref="ccToast"></cc-toast>
    </view>
    <custom-tab-bar></custom-tab-bar>
  </view>
</template>

<script>
  import customTabBar from "@/components/custom-tab-bar/custom-tab-bar.vue"
  import naviHeightMix from "@/mixins/get-NavigationBar_Height.js"
  import ccToast from "@/components/cc-toast/cc-toast.vue"
  export default {
    mixins: [naviHeightMix],
    data() {
      return {
        tabList: ['系统', '评论', '点赞', '粉丝'],
        current: 0,
        systemMessageList: [{
            id: 1,
            avatar: '/static/official.png',
            name: 'Campus circle官方',
            time: '2023年8月15日',
            content: '您的投稿“标题标题标题”已审核通过并由······',
            cover: ''
          },
          {
            id: 2,
            avatar: '/static/official.png',
            name: 'Campus circle官方',
            time: '2023年8月15日',
            content: '您的头像（昵称、签名）修改已审核通过。',
            cover: ''
          },
          {
            id: 3,
            avatar: '/static/official.png',
            name: 'Campus circle官方',
            time: '2023年8月15日',
            content: '您发布的求购“某某某”得到了投递。',
            cover: '/static/post-cover3.png'
          },
        ],
        commentMessageList: [{
            id: 1,
            avatar: '/static/avatar.png',
            name: '暗裔   亚克托斯',
            time: '2023年6月29日   13：23',
            content: '这双鞋是全球购，没有质量问题是退不了的。',
            my_comment: '我感觉吧，这么贵的鞋子很难卖出去···',
            cover: '/static/post-cover3.png',
            post_text: '',
            post_type: '闲置'
          },
          {
            id: 2,
            avatar: '/static/official.png',
            name: '暗裔   亚克托斯',
            time: '2023年6月29日   13：23',
            content: '这双鞋是全球购，没有质量问题是退不了的。',
            my_comment: '',
            cover: '/static/post-cover2.png',
            post_text: '淘宝上面买的Teva的凉鞋，37码，全新，只试穿过一次，很新，现在399元出了。',
            post_type: '求助'
          },
        ],
        favorMessageList: [{
            id: 1,
            avatar: '/static/avatar.png',
            name: '暗裔   亚克托斯',
            time: '2023年6月29日   13：23',
            content: '赞了您的这条评论',
            my_comment: '我感觉吧，这么贵的鞋子很难卖出去···',
            cover: '/static/post-cover3.png',
            post_text: '',
            post_type: '闲置'
          },
          {
            id: 2,
            avatar: '/static/official.png',
            name: '暗裔   亚克托斯',
            time: '2023年6月29日   13：23',
            content: '赞了您的这条帖子',
            my_comment: '',
            cover: '/static/post-cover2.png',
            post_text: '淘宝上面买的Teva的凉鞋，37码，全新，只试穿过一次，很新，现在399元出了。',
            post_type: '求助'
          },
        ],
        funsMessageList: [{
          id: 1,
          avatar: '/static/user.png',
          name: '暗裔   亚克托斯',
          time: '2023-6-29   13：23',
          content: '关注了您',
        }, ],
        releaseMessageList: [{
            id: 101,
            date: '2023年8月29日',
            term: '第213期',
            releaseList: [{
                id: 1,
                avatar: '/static/avatar.png',
                name: '圈子美食家',
                time: '2023年8月29日',
                isAnonymous: true,
                tag: '恋爱',
                content: '本人是东区学光电的女生，现在读大二，想找一个可以托付的男孩子，本人性格开朗，喜欢玩游戏以及运动，希望男的身高190以上，最好帅一点，哈哈哈哈，匿了。',
                imgList: ['/static/post-cover3.png']
              },
              {
                id: 2,
                avatar: '/static/avatar.png',
                name: '暗裔   亚托克斯',
                time: '2023年8月17日',
                isAnonymous: false,
                tag: '恋爱',
                content: '本人是东区学光电的女生，现在读大二，想找一个可以托付的男孩子，本人性格开朗，喜欢玩游戏以及运动，希望男的身高190以上，最好帅一点，哈哈哈哈，匿了。',
                imgList: ['/static/post-cover3.png', '/static/post-cover4.png']
              },
            ]
          },
          {
            id: 201,
            date: '2023年8月29日',
            term: '第213期',
            releaseList: []
          }
        ],
        unitMessageData: [],
        demoData: [],
        userType: '', // user, official
        selectedCount: 0,
      };
    },
    onLoad(options) {
      uni.hideTabBar()

      this.userType = options.userType || ''
      if (this.userType === 'official') {
        this.tabList = ['系统', '投稿', '点赞', '粉丝']
      }

      this.funsMessageList.forEach(x => x.isFocus = false)

      if (this.userType === 'official') {
        this.releaseMessageList.forEach(x => x.releaseList.map(i => i.isSelected = true))

        this.demoData.push(this.systemMessageList, this.releaseMessageList, this.favorMessageList, this.funsMessageList)
        this.unitMessageData.push(this.systemMessageList, this.releaseMessageList, this.favorMessageList, this
          .funsMessageList)
        this.selectedCount = this.demoData[1].reduce(((c, x) => {
          x.releaseList.forEach(i => c += i.isSelected === true)
          return c
        }), 0)
      } else {
        this.demoData.push(this.systemMessageList, this.releaseMessageList, this.favorMessageList, this.funsMessageList)
        this.unitMessageData.push(this.systemMessageList, this.releaseMessageList, this.favorMessageList, this
          .funsMessageList)
      }
      this.$refs.paging1.reload()
    },
    methods: {
      // Tab 点击
      onTabClick: function(index) {
        if (this.current === index) {
          this.$refs['paging' + (index + 1)].reload()
        } else if (this.unitMessageData[index].length === 0) {
          this.$refs['paging' + (index + 1)].reload()
        }

        this.current = index
      },
      // Swiper 切换
      onSwiperChange: function(e) {
        if (e.detail.source === '') return

        const index = e.detail.current
        if (this.current === index) {
          this.$refs['paging' + (index + 1)].reload()
        } else if (this.unitMessageData[index].length === 0) {
          this.$refs['paging' + (index + 1)].reload()
        }

        this.current = index
      },
      // 点击关注
      onFocusClick: function(index) {
        if (this.funsMessageList[index].isFocus) {
          this.funsMessageList[index].isFocus = false
          this.$set(this.funsMessageList, index, this.funsMessageList[index]);
          this.$refs.ccToast.show({
            toastText: "取消关注"
          })
        } else {
          this.funsMessageList[index].isFocus = true
          this.$set(this.funsMessageList, index, this.funsMessageList[index]);
          this.$refs.ccToast.show({
            toastText: "关注成功"
          })
        }
      },
      // 图片预览
      onPreviewImg: function(index, imgs) {
        uni.previewImage({
          urls: imgs,
          current: index
        })
      },

      // 切换胶囊选择
      onChangeCapsule: function(index, item, releaseItem, releaseIndex) {
        releaseItem.isSelected = !releaseItem.isSelected
        this.$set(this.releaseMessageList[index].releaseList, releaseIndex, this.releaseMessageList[index]
          .releaseList[releaseIndex])
        // 选择个数
        this.calculateCount()
      },
      // 计算选择个数
      calculateCount: function() {
        // 选择个数
        this.selectedCount = this.demoData[1].reduce(((c, x) => {
          x.releaseList.forEach(i => c += i.isSelected === true)
          return c
        }), 0)
      },
      // 点击确认投稿
      onConfirmRelease: function() {
        // 退回和投稿清空
        this.demoData[1].forEach(x => x.releaseList = [])

        // 选择个数
        this.calculateCount()
      },

      // 回复评论
      onReplyComment: function() {

      },

      // 请求开始
      onQuery: function(type) {
        if (type === '系统') {
          this.$refs.paging1.complete(this.demoData[0])
        } else if (type === '评论' || type === '投稿') {
          this.$refs.paging2.complete(this.demoData[1])
        } else if (type === '点赞') {
          this.$refs.paging3.complete(this.demoData[2])
        } else if (type === '粉丝') {
          this.$refs.paging4.complete(this.demoData[3])
        }
      }
    },
    components: {
      customTabBar,
      ccToast
    }
  }
</script>

<style lang="scss">
  .messaage-container {
    height: 100%;

    .top-title-bar {
      font-size: 17px;
      font-weight: 800;
    }

    .main-content-wrapper {
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      align-items: center;

      &>view {
        width: 93.48%;
      }

      .tab-list-wrap {
        position: relative;
        margin-top: 20rpx;
        display: flex;

        .tab-item {
          flex: 1;
          padding: 40rpx 0;
          text-align: center;
          font-size: 32rpx;
        }

        .tab-item_active {
          color: #0091FF;
        }

        .active-line {
          position: absolute;
          left: 0;
          bottom: -2rpx;
          width: 25%;
          height: 4rpx;
          transition: all 0.3s ease;

          .inner-line {
            position: absolute;
            top: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 75%;
            height: 4rpx;
            background-color: #0091FF;
          }
        }
      }

      .hr-line {
        width: 100%;
        height: 2rpx;
        margin-top: -2rpx;
        background-color: #00000080;
      }

      .swiper-wrap {
        width: 100%;
        height: calc(100% - 148rpx);

        .swiper-list {
          width: 100%;
          height: 100%;

          .swiper-item {
            position: relative;
            width: 100%;
            height: 100%;
            padding: 0 3.26%;
            box-sizing: border-box;

            .message-list {
              .message-item {
                position: relative;
                left: 0;
                top: 0;
                width: 100%;
                padding-left: 100rpx;
                box-sizing: border-box;
                margin-top: 30rpx;
                margin-bottom: 60rpx;
                display: flex;
                justify-content: flex-start;

                .coner-avatar {
                  position: absolute;
                  left: 0;
                  top: 0;

                  .avatar-pic {
                    width: 70rpx;
                    height: 70rpx;
                    border-radius: 40rpx;
                    overflow: hidden;
                  }
                }

                .middle-message-content {
                  width: calc(100% - 160rpx);
                  margin-right: 20rpx;

                  .time {
                    color: #0191FF;
                    font-size: 20rpx;
                    margin-top: 4rpx;
                    margin-bottom: 20rpx;
                  }

                  .content {
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                  }

                  .my-comment {
                    margin: 6rpx 0;
                    padding: 0 8rpx;
                    background-color: #F0F0F0;
                    border-radius: 16rpx;
                  }

                  .bottom-action-btns {
                    font-size: 16rpx;
                    display: flex;

                    .reply {
                      margin-left: 8rpx;
                    }

                    .report {
                      margin-left: 40rpx;
                    }
                  }
                }

                .right-mini-img {
                  width: 140rpx;
                  height: 130rpx;
                  display: flex;
                  align-items: flex-end;

                  .inner-text {
                    background-color: #F0F0F0;
                    border-radius: 18rpx;
                    overflow: hidden;
                    box-sizing: border-box;
                    width: 100%;
                    height: 100%;
                    padding: 10rpx;
                    overflow: hidden;
                    display: flex;
                    justify-content: center;
                    align-items: center;

                    .text-inner-box {
                      text-align: center;
                      font-size: 16rpx;
                      overflow: hidden;
                      -webkit-line-clamp: 5;
                      text-overflow: ellipsis;
                      display: -webkit-box;
                      -webkit-box-orient: vertical;
                    }
                  }

                  .img {
                    width: 140rpx;
                    height: 130rpx;
                    border-radius: 18rpx;
                    overflow: hidden;
                  }
                }

                .right-focus-back {
                  width: 100rpx;
                  height: 60rpx;
                  background-color: #000;
                  border-radius: 40rpx;
                  color: #FFF;
                  text-align: center;
                  line-height: 60rpx;
                }
              }
            }

            .message-release-content {
              .message-term-item {
                margin-top: 20rpx;

                .term-title {
                  margin: 0 20rpx;
                  font-size: 28rpx;
                  font-weight: 800;
                }

                .term-release-list {
                  .term-release-item {
                    margin-top: 20rpx;

                    .user-info-hd {
                      display: flex;
                      align-items: center;

                      .avatar-box {
                        .img {
                          width: 70rpx;
                          height: 70rpx;
                          border-radius: 40rpx;
                          overflow: hidden;
                        }
                      }

                      .user-info {
                        margin-left: 20rpx;

                        .time {
                          margin-top: 6rpx;
                          color: #0191FF;
                        }
                      }
                    }

                    .release-info-bd {
                      display: flex;
                      flex-direction: column;
                      justify-content: flex-start;
                      align-items: center;

                      &>view {
                        width: 661rpx;
                      }

                      .type-info {
                        margin-top: 20rpx;
                        color: #0091FF;
                      }

                      .content {
                        margin-top: 40rpx;
                      }

                      .img-list {
                        .img-item {
                          margin-top: 10rpx;

                          .pic {
                            height: 350rpx;
                            border-radius: 12rpx;
                            overflow: hidden;
                          }
                        }
                      }

                      .foot-capsule-action {
                        height: 70rpx;
                        border-radius: 40rpx;
                        display: flex;
                        overflow: hidden;
                        margin-top: 10rpx;

                        .release-lefthalf {
                          padding-left: 10rpx;
                        }

                        .reject-righthalf {
                          padding-right: 10rpx;
                        }

                        .release-lefthalf,
                        .reject-righthalf {
                          background-color: #F0F0F0;
                          flex: 1;
                          height: 100%;
                          color: #000;
                          text-align: center;
                          line-height: 70rpx;
                          box-sizing: border-box;
                        }
                      }
                    }
                  }
                }
              }
            }

            .release-action-fixbottom {
              position: absolute;
              left: 0;
              right: 0;
              bottom: 0;
              height: 100rpx;
              background-color: #FFF;
              display: flex;
              justify-content: space-between;
              align-items: center;
              padding: 0 20rpx;
              box-sizing: border-box;

              .action-info {
                font-size: 32rpx;
              }

              .action-confirm {
                width: 140rpx;
                height: 50rpx;
                border-radius: 30rpx;
                text-align: center;
                line-height: 50rpx;
                background-color: #0091FF;
                color: #000;
              }
            }
          }
        }
      }
    }
  }
</style>